<template>
  <Grid :col="4" :border="false" padding="5px">
    <GridItem>
      <Button v-auth:func:add icon="md-add-circle" type="primary" @click="$emit('add-func')" style="margin-right: 5px">添加功能</Button>
      <Button v-auth:func:batch:del icon="ios-remove-circle-outline" type="error" @click="$emit('batch-remove')">批量删除</Button>
    </GridItem>
    <GridItem>
      <Input search enter-button="查询" @on-search="handleSearch" v-auth.func:query
             placeholder="Enter something..." v-model="search.value">
        <template #prepend>
          <Select v-model="search.name" style="width: 80px">
            <Option value="funcName">功能名</Option>
            <Option value="menuName">菜单名</Option>
          </Select>
        </template>
      </Input>
    </GridItem>
  </Grid>
</template>

<script>
export default {
  emits: ["add-func", "batch-remove", "update:model-value", "search"],
  data() {
    return {
      search: {
        name: "funcName",
        value: "",
      },
    }
  },
  methods: {
    handleSearch() {
      // {name: funcName, value: "xxxx"} ===> {funcName: "xxxx"}
      let obj = {[this.search.name]: this.search.value};
      this.$emit("update:model-value", obj);
      this.$emit("search");
    }
  }
}
</script>

<style scoped>

</style>